<template>
  <div class="device-preview">
    <div class="">
      <h2 class="title">多端适配预览</h2>
      <div class="img">
        <img src="@/assets/home/admin/home/home_top.png" alt="" />
      </div>
    </div>
    <div class="device-tabs">
      <div class="device-phone"  @click="switchTab('mobile')"></div>
      <div class="device-pc" @click="switchTab('desktop')"></div>
    </div>

    <!-- 手机预览 -->
    <div v-if="activeTab === 'mobile'" class="phone-preview">
      <img :src="phonePreviewImage" alt="手机预览" />
    </div>

    <!-- 电脑端预览 -->
    <!-- <div v-else class="desktop-preview">
      <img :src="desktopPreviewImage || phonePreviewImage" alt="电脑端预览" />
    </div> -->
  </div>
</template>

<script>
export default {
  name: "DevicePreview",
  props: {
    phonePreviewImage: {
      type: String,
      default: require("@/assets/home/admin/home/phone_back_have.png"),
    },
    desktopPreviewImage: {
      type: String,
      default: "", // 电脑端预览图路径，可选
    },
  },
  data() {
    return {
      activeTab: "mobile", // 默认显示手机端
    };
  },
  methods: {
    // 切换设备标签
    switchTab(tab) {
      this.activeTab = tab;
      // 触发事件，让父组件知道标签切换了
      this.$emit("tabChange", tab);
    },
  },
};
</script>

<style lang="scss" scoped>
.device-preview {
  background-image: url("@/assets/home/admin/home/home_back.png");
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 8px;
  padding: 20px;
  height: 100%;
  position: relative;
  .title {
    font-variation-settings: "opsz" auto;
    font-feature-settings: "kern" on;
    color: #26426c;
    text-shadow: 1px 1px 2px #6a9fe2;
    font-size: 22px;
  }
  .img {
    position: absolute;
    right: 10px;
    top: 0px;
    img {
      max-height: 100px;
    }
  }
}

.device-tabs {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  position: absolute;
  left: -6px;
  position: absolute;
  top: 90px;
  .device-phone {
    background-image: url("@/assets/home/admin/home/top_button.png");
    background-repeat: no-repeat;
    background-position: -13px -4px;
    width: 103px;
    height: 60px;
    cursor: pointer;
  }
  .device-pc {
    background-image: url("@/assets/home/admin/home/top_button.png");
    background-repeat: no-repeat;
    background-position: -13px -63px;
    width: 103px;
    height: 60px;
    cursor: pointer;
  }
  .tab-item {
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
    &.active {
      background-color: #155bd4;
      color: white;
    }
    i {
      margin-right: 5px;
    }
  }
}

.phone-preview {
  display: flex;
  justify-content: flex-end;
  margin-top: 40px;
  margin-right: 25px;
  img {
    width: 200px;
    border-radius: 8px;
  }
}

.desktop-preview {
  display: flex;
  justify-content: center;
  img {
    max-width: 100%;
    border-radius: 8px;
    // 如果没有电脑端预览图，则默认使用手机预览图
  }
}
</style>
